<template>
  <el-input v-bind="$attrs" v-model="value" :size="size" style="width: 240px" placeholder="Please input" />
  <CountdownButton :size="size" :count="count" :before-start-func="sendCodeApi" />
</template>

<script setup>
import CountdownButton from "./countdown-button.vue";

defineOptions({ name: "CountDownInput", inheritAttrs: false });
const emits = defineEmits(["update:value"]);
const props = defineProps({
  value: { type: String },
  size: { type: String, validator: (v) => ["default", "large", "small"].includes(v) },
  count: { type: Number, default: 60 },
  sendCodeApi: { type: Function, default: null },
});

const value = computed({
  get() {
    return props.value;
  },
  set(v) {
    emits("update:value", v);
  },
});
</script>

<style lang="scss" scoped></style>
